<template>
  <div class="video_content">
    <div class="video_content_about">
      <div class="video_content_player">
        <div class="video_content_player_container">
          <VideoContent
            v-model:open-bullet="isOpenBullet"
            ref="videoContentRef"
            :url="currentUrl"
          />
        </div>
      </div>
      <div class="video_content_player_sending_bar">
        <div class="video_content_info">2人正在看,已装填 424 条弹幕</div>
        <div class="video_content_send_msg">
          <div @click="isOpenBullet = !isOpenBullet" class="video_content_bullet">
            <SvgIcon v-if="isOpenBullet" name="tanmuOpen" width="24" height="24" />
            <SvgIcon v-if="!isOpenBullet" name="tanmuClose" width="24" height="24" />
          </div>
          <div class="video_content_bullet" id="video_content_bullet_settings"></div>
          <input
            placeholder="善语结善缘，恶语伤人心"
            autocomplete="off"
            class="video_content_send_msg_input"
            v-model="state.comment"
            @keydown.enter="sendMsg"
          />
          <button class="video_content_send_msg_btn" @click="sendMsg">发送</button>
        </div>
      </div>
      <div class="video_content_operation">
        <div class="video_content_operation_item">
          <SvgIcon name="thumbs-up" width="24" height="24" />
          <span>200</span>
        </div>
        <div class="video_content_operation_item">
          <SvgIcon name="star" width="24" height="24" />
          <span>收藏</span>
        </div>
        <div class="video_content_operation_item">
          <SvgIcon name="share" width="24" height="24" />
          <span>分享</span>
        </div>
        <div class="video_content_operation_item">
          <SvgIcon name="report" width="24" height="24" />
          <span>举报</span>
        </div>
      </div>
      <div class="video_content_info_container">
        <div class="video_content_info_container_tit">
          <div class="tit_words">
            盘点交警紧急开道感人瞬间，找警察叔叔解决问题，一定没有错
            盘点交警紧急开道感人瞬间，找警察叔叔解决问题，一定没有错
            盘点交警紧急开道感人瞬间，找警察叔叔解决问题，一定没有错
          </div>
        </div>
        <div class="video_content_info_container_time">原创 · 97万次观看 · 2022-12-7</div>
        <div class="video_content_info_container_author">
          <div class="video_author_avatar">
            <el-avatar
              style="border: 1px solid #1a1a1a"
              :size="60"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              @error="() => true"
            >
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
            </el-avatar>
          </div>
          <div class="video_author_info">
            <div class="video_author_name">毛帽子的生活方式毛帽子的生活方式</div>
            <div class="video_author_fans">5.9万粉丝·273视频</div>
          </div>
          <div class="video_author_follow">
            <button class="follow_btn">已关注</button>
          </div>
        </div>
      </div>
      <div class="video_content_discuss">
        <VideoDiscuss />
      </div>
    </div>
    <div class="video_content_recommend">
      <div class="recommend_tit">接下来播放</div>
      <div class="recommend_list" style="overflow: auto">
        <a class="recommend_item" v-for="i in 10" :key="i">
          <div class="recommend_item_order_number">{{ i }}</div>
          <div class="recommend_item_cover">
            <img src="../../assets/img/logo.jpg" class="cover_img" />
          </div>
          <div class="recommend_item_info">
            <div class="recommend_item_name">
              如何开启速度发顺丰如何开启速度发顺丰如何开启速度发顺丰如何开启速度发顺丰
            </div>
            <div class="recommend_item_author">链球菌</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import VideoDiscuss from './VideoDiscuss.vue';
  import SvgIcon from '@/components/SvgIcon/index.vue';
  import VideoContent from './VideoContent.vue';

  // 定义 VideoContentRef 类型
  interface VideoContentRef {
    sendComment: (comment: string) => void;
  }

  // 定义 State 类型
  interface State {
    comment: string;
  }

  const currentUrl = ref<string>(
    'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
  );
  const isOpenBullet = ref<boolean>(true);
  const videoContentRef = ref<VideoContentRef | null>(null);
  const state = reactive<State>({
    comment: '',
  });

  // 发送评论
  const sendMsg = () => {
    if (state.comment === '') {
      return;
    }
    videoContentRef.value?.sendComment(state.comment);
    state.comment = '';
  };
</script>

<style lang="scss" scoped>
  .video_content {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .video_content_about {
      width: 65%;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .video_content_player {
        width: 100%;
        padding: 30px 0 0 3%;
        height: auto;
        margin-bottom: 10px;

        .video_content_player_container {
          width: 100%;
          height: 100%;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
          border: 1px solid #ded1d1;
          background-color: #1c1616;
        }
      }

      .video_content_player_sending_bar {
        padding: 0 0 0 3%;
        display: flex;
        align-items: center;
        height: 50px;
        width: 100%;

        .video_content_info {
          font-size: 15px;
          font-weight: 400;
          color: #2c3e50;
        }

        .video_content_player_set {
          width: 70px;
          text-align: center;
          line-height: 0;
          cursor: pointer;
        }

        .video_content_send_msg {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          box-sizing: border-box;
          padding: 0 0 0 10px;

          .video_content_bullet {
            height: 100%;
            display: flex;
            align-items: center;

            svg {
              height: 24px;
              width: 24px;
              cursor: pointer;
            }
          }

          svg {
            height: 34px;
            width: 34px;
            margin-right: 8px;
            cursor: pointer;
          }

          .video_content_send_msg_input {
            width: 100%;
            height: 34px;
            padding: 0 10px;
            border-radius: 5px 0 0 5px;
            border: none;
            outline: none;
          }

          .video_content_send_msg_btn {
            height: 34px;
            width: 60px;
            padding: 0 5px;
            cursor: pointer;
            background-color: #13c2c2;
            border-radius: 0 5px 5px 0;
            border: none;
            color: whitesmoke;
            font-weight: 600;
          }
        }
      }

      .video_content_operation {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 40px;
        padding-left: 3%;
        width: 100%;

        .video_content_operation_item {
          display: flex;
          align-items: center;
          letter-spacing: 2px;
          cursor: pointer;
          padding: 2.5px;
          border-radius: 5px;
          margin-left: 10px;

          span {
            font-size: 12px;
            line-height: 24px;
            user-select: none;
            margin-left: 3px;
          }

          svg {
            height: 20px;
            width: 20px;
          }
        }

        .video_content_operation_item:hover {
          cursor: pointer;
          background-color: #e4e4e4;
        }
      }

      .video_content_info_container {
        padding-left: 3%;
        width: 100%;
        padding-top: 20px;

        .video_content_info_container_tit {
          display: -webkit-flex;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          word-break: break-all;
          line-break: anywhere;
          -webkit-line-clamp: 2;
          padding: 5px 0;

          .tit_words {
            display: inline;
            color: var(--content-primary);
            line-height: 33px;
            font-size: 18px;
            font-weight: 500;
          }
        }

        .video_content_info_container_time {
          font-size: 12px;
          color: #2c3e50;
          padding: 0 0 10px 0;
          font-weight: 200;
        }

        .video_content_info_container_author {
          padding: 10px 0;
          display: flex;

          .video_author_avatar {
            padding: 0;
          }

          .video_author_info {
            display: flex;
            flex-direction: column;
            padding: 0 10px;
            justify-content: space-around;
            max-width: 50%;

            .video_author_fans {
              font-size: 14px;
              color: #2c3e50;
              font-weight: 400;
            }

            .video_author_name {
              font-size: 16px;
              font-weight: 600;
              cursor: pointer;
              display: -webkit-box;
              overflow: hidden;
              -webkit-box-orient: vertical;
              text-overflow: ellipsis;
              word-break: break-all;
              line-break: anywhere;
              -webkit-line-clamp: 1;
            }
          }

          .video_author_follow {
            padding: 0 10px;
            display: flex;
            align-items: center;

            .follow_btn {
              width: 88px;
              height: 36px;
              cursor: pointer;
              background-color: #fe3355;
              border: none;
              border-radius: 5px;
              color: #d2f4ef;
            }

            .follow_btn:hover {
              background-color: #d0405c;
            }

            .follow_btn_active {
              background-color: #ffffff;
              color: #1a1a1a;
              border: 1px solid #cec8c8;
              font-weight: 600;
            }

            .follow_btn_active:hover {
              background-color: #ffffff;
            }
          }
        }
      }

      .video_content_discuss {
        padding-left: 3%;
        width: 100%;
        padding-top: 10px;
      }
    }

    .video_content_recommend {
      padding-top: 30px;
      width: 28%;
      display: flex;
      flex-direction: column;
      height: 500px;

      .recommend_tit {
        height: 50px;
        font-weight: 700;
        width: 100%;
        line-height: 50px;
        text-indent: 10px;
        border: 1px solid #b9c0c9;
        border-bottom: 1px solid #e0dada;
        box-sizing: border-box;
      }

      .recommend_list {
        width: 100%;
        height: 100%;
        aspect-ratio: 0.81;
        border: 1px solid #b9c0c9;
        border-top: none;
        box-sizing: border-box;
        padding: 3px 0;

        .recommend_item {
          height: 70px;
          display: flex;
          align-items: center;
          cursor: pointer;

          .recommend_item_order_number {
            width: 30px;
            text-align: center;
            line-height: 60px;
          }

          .recommend_item_cover {
            height: 50px;
            width: 50px;
            margin: 0 10px;

            .cover_img {
              height: 100%;
              width: 100%;
            }
          }

          .recommend_item_info {
            padding-right: 10px;
            height: 100%;
            max-width: 63%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .recommend_item_name {
              margin: 0 0 4px 0;
              font-family: 'Roboto', 'Arial', sans-serif;
              font-size: 1rem;
              font-weight: 500;
              overflow: hidden;
              -webkit-line-clamp: 2;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              text-overflow: ellipsis;
              white-space: normal;
            }

            .recommend_item_author {
              font-size: 13px;
              color: #2c3e50;
              line-height: 25px;
            }
          }
        }

        .recommend_item:hover {
          background-color: #d2f4ef;
        }
      }
    }
  }
</style>
